<template>
  <Transition name="slide-left">
    <div v-if="showSetting" class="setting page">
      <PageHead title="设置中心" @back="showSetting = false"> </PageHead>
      <section class="flex gr-4">
        <div class="w-100">
          <List
            v-for="(item, key) in list"
            :key="key"
            :title="item.title"
            @click="item.action"
          >
          </List>
        </div>
      </section>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';
  import { getUserStore } from '@/store/user/utils';
  import { notify } from '@/views/components/notify/notify';
  import { showLoading } from '@/views/components/loading/loading';
  import { showSetting } from './setting';

  const store = getUserStore();
  const list = [
    {
      title: '清空零钱',
      action: () => {
        notify({
          type: 'warning',
          show: true,
          title: '警告',
          content: '确定清空零钱吗？',
          onConfirm() {
            store.master.pocketMoney = 0;
            showLoading({ type: 'feedback', text: '成功清空' });
          },
        });
      },
    },
    {
      title: '清空朋友圈',
      action: () => {
        notify({
          type: 'warning',
          show: true,
          title: '警告',
          content: '确定清空朋友圈吗？',
          onConfirm() {
            store.moments = [];
            showLoading({ type: 'feedback', text: '成功清空' });
          },
        });
      },
    },
    {
      title: '清空用户信息',
      action: () => {
        notify({
          type: 'warning',
          show: true,
          title: '警告',
          content: '确定清空用户信息吗？',
          onConfirm() {
            store.master = {
              username: 'Gary',
              wxId: '',
              avatar: '',
              area: '',
              pocketMoney: 0,
            };
            showLoading({ type: 'feedback', text: '成功清空' });
          },
        });
      },
    },
    {
      title: '清空好友',
      action: () => {
        notify({
          type: 'warning',
          show: true,
          title: '警告',
          content: '确定清空好友吗？',
          onConfirm() {
            store.contacts = [];
          },
        });
      },
    },
  ];
</script>

<style lang="scss" scoped>
  .setting {
    background-color: var(--background-color);
  }
</style>
